<template>
  <div ref="container" class="fullscreen-container">
    <!-- 顶部导航 -->
    <div class="head">
      <div class="shangm-title">
        <img class="logo" src="../assets/logo2.png" alt="logo" />
        <label>驰骋无界汽车俱乐部</label>
      </div>
      <div class="quanpin">
        <i
          v-if="!isFullscreen"
          @click="toggleFullscreen"
          class="iconfont icon-quanping"
          style="cursor: pointer; font-size: 30px"
        ></i>
        <i
          v-else
          @click="toggleFullscreen"
          class="iconfont icon-tuichuquanping"
          style="cursor: pointer; font-size: 30px"
        ></i>
      </div>
    </div>

    <!-- 主体布局 -->
    <div class="layout">
      <!-- 侧边菜单 -->
      <div class="menu">
        <ul>
          <li
            v-for="(item, index) in data.menus"
            :key="index"
            :class="{ active: data.active === item.index }"
            @click="changeMenu(item.index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 内容区域 -->
      <div class="content">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, onMounted, onUnmounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { enterFullscreen, exitFullscreen, checkFullscreen } from "@/utils/fullscreen";

interface MenuItem {
  index: number;
  name: string;
}

interface Data {
  menus: MenuItem[];
  active: number;
}

export default {
  setup() {
    const data = reactive<Data>({
      menus: [
        { index: 0, name: "首页" },
        { index: 1, name: "会员" },
        { index: 2, name: "订单" },
        { index: 3, name: "交班" },
      ],
      active: 0,
    });
    const router = useRouter();

    // 切换菜单
    const changeMenu = (index: number) => {
      data.active = index;
      if (index === 0) {
        router.push("/");
      }
      if (index === 1) {
        router.push("/vip");
      }
      if (index === 2) {
        router.push("/order");
      }
      if (index === 3) {
        router.push("/nextshift");
      }
    };

    // 容器引用
    const container = ref(null);
    const isFullscreen = ref(false);

    // 切换全屏
    const toggleFullscreen = async () => {
      if (isFullscreen.value) {
        await exitFullscreen();
      } else {
        await enterFullscreen(container.value);
      }
    };

    // 监听全屏状态变化
    const handleFullscreenChange = () => {
      isFullscreen.value = !!checkFullscreen();
      console.log("全屏状态变化:", isFullscreen.value);
    };

    // 添加事件监听
    onMounted(() => {
      document.addEventListener("fullscreenchange", handleFullscreenChange);
      document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
      document.addEventListener("mozfullscreenchange", handleFullscreenChange);
      document.addEventListener("msfullscreenchange", handleFullscreenChange);
    });

    // 移除事件监听
    onUnmounted(() => {
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
      document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
      document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
      document.removeEventListener("msfullscreenchange", handleFullscreenChange);
    });

    return {
      container,
      isFullscreen,
      toggleFullscreen,
      data,
      changeMenu,
    };
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.menu ul {
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  padding-left: 5px;
}

.menu li {
  list-style: none;
  height: 90px;
  border-radius: 8px;
  line-height: 90px;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  background-color: #efefef;
  margin-bottom: 8px;
}

.menu li.active {
  background-color: darksalmon !important;
  color: #fff !important;
}

.layout {
  height: calc(100vh - 60px);
  display: flex;
  width: 100%;
  padding-top: 8px;
}

.menu {
  width: 100px;
  height: 100%;
  padding-right: 5px;
  border-right: 1px solid #eee;
}

.content {
  flex: 1;
  height: 100%;
  padding-left: 8px;
}

.head {
  display: flex;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.logo img {
  height: 40px;
  margin: 10px;
}

.quanpin {
  flex: 1;
  text-align: right;
  padding-right: 8px;
  line-height: 60px;
}

.fullscreen-container {
  width: 100%;
  height: 100vh;
  align-items: center;
  background-color: #fff;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
.shangm-title {
  height: 100%;
  width: 260px;
  font-size: 25px;
}
.logo {
  width: 30px;
}
</style>
